<template>
	<view class='youhui-list background'>
		<view class="ziti">
			<text class="ziti-text">享独家折扣！限时优惠，不容错过！快来抢购吧</text>
		</view>
		<!-- 商品列表组件 -->
		<view class='youhui' v-for="(item, index) in commodityList" :key="index" @tap='goDetails(item.id)'>
			<image class='youhui-img' :src="item.imgUrl" mode=""></image>
			<view class='youhui-content'>
				<text class='youhui-name'>{{ item.name }}</text>
				<view>
					<text class='price'>¥{{ item.price }}</text>
					<text class='oprice'>¥{{item.oprice}}</text>
				</view>
				<text class='discount'>{{item.discount}}折</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				commodityList: [{
						id: 1,
						imgUrl: "../../static/img/youhui-img/bao1.jpg",
						name: "游戏限量款书包",
						price: "38.4",
						oprice: "64",
						discount: "6"
					},
					{
						id: 2,
						imgUrl: "../../static/img/youhui-img/bao2.jpg",
						name: "游戏限量款书包",
						price: "35",
						oprice: "70",
						discount: "5"
					},
					{
						id: 3,
						imgUrl: "../../static/img/youhui-img/baozhen1.jpg",
						name: "手心里的温柔–萌宠抱枕！",
						price: "21",
						oprice: "30",
						discount: "7"
					},
					{
						id: 4,
						imgUrl: "../../static/img/youhui-img/baozhen2.jpg",
						name: "可爱卡通女孩造型，柔软亲肤，舒适陪伴。",
						price: "30",
						oprice: "100",
						discount: "3"
					},
					{
						id: 5,
						imgUrl: "../../static/img/youhui-img/changfen.jpg",
						name: "美味肠粉",
						price: "10",
						oprice: "20",
						discount: "5"
					},
					{
						id: 6,
						imgUrl: "../../static/img/youhui-img/latiao.jpg",
						name: "新款辣条",
						price: "3.5",
						oprice: "5",
						discount: "7"
					},
					{
						id: 7,
						imgUrl: "../../static/img/youhui-img/diannaobao1.jpg",
						name: "时尚动漫设计，容量大，耐用，适合各种场合。",
						price: "24",
						oprice: "40",
						discount: "6"
					},
					{
						id: 8,
						imgUrl: "../../static/img/youhui-img/diannaobao2.jpg",
						name: "时尚动漫设计，容量大，耐用，适合各种场合。",
						price: "25",
						oprice: "50",
						discount: "5"
					},
					{
						id: 9,
						imgUrl: "../../static/img/youhui-img/manhua1.jpg",
						name: "《伍六七》漫画，一幅描绘现代生活的漫画",
						price: "197.7",
						oprice: "659",
						discount: "3"
					},
					{
						id: 10,
						imgUrl: "../../static/img/youhui-img/manhua2.jpg",
						name: "《梦的花粉店》漫画，梦幻唯美，青春浪漫。",
						price: "186",
						oprice: "620",
						discount: "3"
					},
					{
						id: 11,
						imgUrl: "../../static/img/youhui-img/maoronwanju1.jpg",
						name: "可爱毛绒玩具，适合所有年龄段人群。",
						price: "33",
						oprice: "110",
						discount: "3"
					},
					{
						id: 12,
						imgUrl: "../../static/img/youhui-img/maoronwanju2.jpg",
						name: "可爱毛绒玩具，适合所有年龄段人群。",
						price: "26.4",
						oprice: "88",
						discount: "3"
					},
					{
						id: 13,
						imgUrl: "../../static/img/youhui-img/maoyi1.jpg",
						name: "黑色连帽衫设计独特，时尚与舒适兼备",
						price: "27.5",
						oprice: "55",
						discount: "5"
					},
					{
						id: 14,
						imgUrl: "../../static/img/youhui-img/maoyi2.jpg",
						name: "精致格纹图案，柔软舒适面料，时尚与温暖并存。",
						price: "36",
						oprice: "60",
						discount: "6"
					},
					{
						id: 15,
						imgUrl: "../../static/img/youhui-img/maozi1.jpg",
						name: "黑色棒球帽，印有日本动漫《名侦探柯南》的角色图案。",
						price: "26",
						oprice: "52",
						discount: "5"
					},
					{
						id: 16,
						imgUrl: "../../static/img/youhui-img/maozi2.jpg",
						name: "时尚百搭棒球帽，遮阳透气。",
						price: "30.1",
						oprice: "43",
						discount: "7"
					},
					{
						id: 17,
						imgUrl: "../../static/img/youhui-img/mofang1.jpg",
						name: "轻松上手，无限乐趣！",
						price: "143.1",
						oprice: "477",
						discount: "3"
					},
					{
						id: 18,
						imgUrl: "../../static/img/youhui-img/mofang2.jpg",
						name: "磁力魔方，百变造型，益智玩具。",
						price: "50",
						oprice: "500",
						discount: "1"
					},
					{
						id: 19,
						imgUrl: "../../static/img/youhui-img/san1.jpg",
						name: "晴天雨天，为你守护——天气之子全自动双层雨伞。",
						price: "13.8",
						oprice: "69",
						discount: "2"
					},
					{
						id: 20,
						imgUrl: "../../static/img/youhui-img/san2.jpg",
						name: "黑色雨伞，图案精致，防水耐用，实用与美观兼备。",
						price: "32.8",
						oprice: "82",
						discount: "4"
					},
					{
						id: 21,
						imgUrl: "../../static/img/youhui-img/shugui1.jpg",
						name: "现代简约，实用美观。",
						price: "45",
						oprice: "90",
						discount: "5"
					},
					{
						id: 22,
						imgUrl: "../../static/img/youhui-img/shugui2.jpg",
						name: "简约现代，多功能储物架。",
						price: "26.7",
						oprice: "89",
						discount: "3"
					},
					{
						id: 23,
						imgUrl: "../../static/img/youhui-img/shuibei1.jpg",
						name: "《小林家的龙女仆》周边产品，实用与美观兼备的水杯。",
						price: "32.5",
						oprice: "65",
						discount: "5"
					},
					{
						id: 24,
						imgUrl: "../../static/img/youhui-img/shuibei2.jpg",
						name: "古风设计，精致美观",
						price: "24",
						oprice: "40",
						discount: "6"
					},
					{
						id: 25,
						imgUrl: "../../static/img/youhui-img/shuzhuo1.jpg",
						name: "多功能办公学习桌",
						price: "35.2",
						oprice: "44",
						discount: "8"
					},
					{
						id: 26,
						imgUrl: "../../static/img/youhui-img/shuzhuo2.jpg",
						name: "简约办公学习桌",
						price: "21.2",
						oprice: "53",
						discount: "4"
					},
					{
						id: 27,
						imgUrl: "../../static/img/youhui-img/sijiantao1.jpg",
						name: "精美四件套，家居好选择。",
						price: "94",
						oprice: "470",
						discount: "2"
					},
					{
						id: 28,
						imgUrl: "../../static/img/youhui-img/sijiantao2.jpg",
						name: "精美四件套，家居好选择。",
						price: "111",
						oprice: "370",
						discount: "3"
					},
					{
						id: 29,
						imgUrl: "../../static/img/youhui-img/weijin1.jpg",
						name: "彩色格子图案，柔软舒适，时尚百搭。",
						price: "27",
						oprice: "90",
						discount: "3"
					},
					{
						id: 30,
						imgUrl: "../../static/img/youhui-img/weijin2.jpg",
						name: "舒适温暖白色围巾，适合冬季佩戴。",
						price: "50.5",
						oprice: "101",
						discount: "5"
					},
					{
						id: 31,
						imgUrl: "../../static/img/youhui-img/yanjing1.jpg",
						name: "时尚红框眼镜",
						price: "20",
						oprice: "40",
						discount: "5"
					},
					{
						id: 32,
						imgUrl: "../../static/img/youhui-img/yanjing2.jpg",
						name: "时尚红框眼镜",
						price: "27.2",
						oprice: "34",
						discount: "8"
					},
					{
						id: 33,
						imgUrl: "../../static/img/youhui-img/zhijinhe1.jpg",
						name: "可爱青蛙抽纸盒",
						price: "5",
						oprice: "10",
						discount: "5"
					},
					{
						id: 34,
						imgUrl: "../../static/img/youhui-img/zhijinhe2.jpg",
						name: "搞怪青蛙抽纸盒",
						price: "6.4",
						oprice: "8",
						discount: "8"
					},
					{
						id: 35,
						imgUrl: "../../static/img/youhui-img/zonzi.jpg",
						name: "三种不同口味的粽子",
						price: "12",
						oprice: "40",
						discount: "3"
					}
				]
			}
		},
		methods: {
			goDetails(id) {
				uni.navigateTo({
					url: '../../pages/details/details?id=' + id + ''
				})
			}
		}
	}
</script>

<style scoped>
	/* 页面背景 */
	.background {
		background-image: url("http://5b0988e595225.cdn.sohucs.com/images/20200214/b10c23d5aa5a444da21bc6058475cc1f.jpeg");
		/* 覆盖整个背景区域 */
		background-size: cover;
		/* 背景图片居中显示 */
		background-position: center;
	}

	/* 顶部字体 */
	.ziti {
		width: 100%;
		margin: 5px 2px;
		background-color: #FF3333;
		/* 添加阴影效果 */
		box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
	}

	.ziti-text {
		font-size: 18px;
		color: white;
	}

	/* 页面布局 */
	.youhui-list {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		width: 100%;
	}

	.youhui {
		width: 50%;
		box-sizing: border-box;
		padding: 10px;
	}

	.youhui-img {
		width: 100%;
		height: 200px;
		border: 1px solid yellowgreen;
		/* 添加圆角 */
		border-radius: 10px;
		/* 添加阴影效果 */
		box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
	}

	.youhui-content {
		text-align: center;
	}

	.youhui-name {
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
		color: #333333;
		word-break: break-all;
		padding: 2px 8px;
		font-size: 12px;
		/* 调整行高 */
		line-height: 1.2;
		/* 增加字间距 */
		letter-spacing: 0.3px;
	}

	.oprice {
		text-decoration: line-through;
		font-size: 24rpx;
		color: #999999;
	}

	.discount {
		border-radius: 2px;
		border: 1px solid #FF3333;
		padding: 1px 5px;
		font-size: 10px;
		color: #FF3333;
	}
</style>